Angular 6 Development: Angular Material and Angular Elements

Angular 6 Development: Angular Material and Angular Elements

• install support for creating custom elements using Angular 6
• create an Angular 6 component geared towards becoming a custom element
• register an Angular 6 component for conversion to a custom element
• build and test a custom element from an Angular 6 app
• package a custom element for easy movement
• use an Angular 6 generated custom element in a regular HTML app
• configure an Angular app to use Angular Material via a schematic
• create a dashboard component using an Angular material starter component
• create a sidebar-based navigation app using an Angular material starter component

Angular Material provides a set of components and themes for creating stunning web apps. Angular Elements lets you turn Angular components into web components. Discover the basics of using Angular Material and Elements.

Angular 6 Development: Angular Material and Angular Elements

Angular 6 Development: Angular Material and Angular Elements

• install support for creating custom elements using Angular 6
• create an Angular 6 component geared towards becoming a custom element
• register an Angular 6 component for conversion to a custom element
• build and test a custom element from an Angular 6 app
• package a custom element for easy movement
• use an Angular 6 generated custom element in a regular HTML app
• configure an Angular app to use Angular Material via a schematic
• create a dashboard component using an Angular material starter component
• create a sidebar-based navigation app using an Angular material starter component

Angular Material provides a set of components and themes for creating stunning web apps. Angular Elements lets you turn Angular components into web components. Discover the basics of using Angular Material and Elements.

Angular 6 Development: Dependency Injection and ng-bootstrap

Angular 6 Development: Dependency Injection and ng-bootstrap

• create and deploy a PWA using Angular 6 Schematics
• install support for working with Bootstrap components in an Angular 6 app via Schematics
• use the ng-bootstrap Typeahead directive in order to provide auto completion suggestions to users
• use the ng-bootstrap Datepicker directive to allow end users to choose dates
• use the ng-bootstrap Timepicker directive to allow end users to set times
• understand some of the potential issues that can be faced when classes create their own dependencies
• understand how DI helps avoid certain issues with designing programs
• create and register an Angular service and provider using the @Injectable decorator
• create and register an Angular service and provider as part of an NgModule
• create a component level service provider in Angular 6
• use the provide object literal to register a service class provider
• configure an injector and service provider to use an alias when providing a class dependency value
• configure a service provider to provide a dependency value based on a factory function
• create a provider that's able to inject non class values

Dependency Injection is at the core of how Angular operates and ng-bootstrap gives us many advanced components we can work with. Discover how Angular 6 DI works and how to use some ng-bootstrap components.

Angular 6 Development: Dependency Injection and ng-bootstrap

Angular 6 Development: Dependency Injection and ng-bootstrap

• create and deploy a PWA using Angular 6 Schematics
• install support for working with Bootstrap components in an Angular 6 app via Schematics
• use the ng-bootstrap Typeahead directive in order to provide auto completion suggestions to users
• use the ng-bootstrap Datepicker directive to allow end users to choose dates
• use the ng-bootstrap Timepicker directive to allow end users to set times
• understand some of the potential issues that can be faced when classes create their own dependencies
• understand how DI helps avoid certain issues with designing programs
• create and register an Angular service and provider using the @Injectable decorator
• create and register an Angular service and provider as part of an NgModule
• create a component level service provider in Angular 6
• use the provide object literal to register a service class provider
• configure an injector and service provider to use an alias when providing a class dependency value
• configure a service provider to provide a dependency value based on a factory function
• create a provider that's able to inject non class values

Dependency Injection is at the core of how Angular operates and ng-bootstrap gives us many advanced components we can work with. Discover how Angular 6 DI works and how to use some ng-bootstrap components.

Angular 6 Development: Introduction

Angular 6 Development: Introduction

• install Angular 6 using Angular CLI
• work with one way data binding via interpolation and property binding
• bind events to custom methods
• use property binding to pass input values into Angular components
• pass data out from child components to host components
• use the ngFor directive to repeat elements in an Angular template
• create and add routes to an Angular app
• use parameters in Angular routes
• know the purpose of schematics when using Angular CLI
• install the schematics CLI tool and use it to create a new schematic project
• define a rule factory function with a rule that describes a transformation to be made
• run a custom schematic and understand how to toggle dry mode
• install and use a schematic via Angular CLI

Angular 6 has some new features and many bug fixes. Explore those features, and learn how to create Angular 6 apps, and how to work schematics in Angular apps.

Angular 6 Development: Introduction

Angular 6 Development: Introduction

• install Angular 6 using Angular CLI
• work with one way data binding via interpolation and property binding
• bind events to custom methods
• use property binding to pass input values into Angular components
• pass data out from child components to host components
• use the ngFor directive to repeat elements in an Angular template
• create and add routes to an Angular app
• use parameters in Angular routes
• know the purpose of schematics when using Angular CLI
• install the schematics CLI tool and use it to create a new schematic project
• define a rule factory function with a rule that describes a transformation to be made
• run a custom schematic and understand how to toggle dry mode
• install and use a schematic via Angular CLI

Angular 6 has some new features and many bug fixes. Explore those features, and learn how to create Angular 6 apps, and how to work schematics in Angular apps.

Angular 6 Development: Libraries

Angular 6 Development: Libraries

• manually define an app module that is set up to be converted to a library package
• verify that functionality to be exposed as an Angular Library works as expected
• manually build and package a library module
• set up an Angular workspace and recognize that it supports multiple projects
• use Angular CLI 6 to generate a new library project
• add custom code to a default library project to help meet business requirements
• build a library project using Angular 6 CLI
• package a built library project into a tarball and use npm install to add the package's functionality to an Angular 6 app

Discover how to create Angular libraries both manually and with the assistance of Angular CLI 6.

Angular 6 Development: Libraries

Angular 6 Development: Libraries

• manually define an app module that is set up to be converted to a library package
• verify that functionality to be exposed as an Angular Library works as expected
• manually build and package a library module
• set up an Angular workspace and recognize that it supports multiple projects
• use Angular CLI 6 to generate a new library project
• add custom code to a default library project to help meet business requirements
• build a library project using Angular 6 CLI
• package a built library project into a tarball and use npm install to add the package's functionality to an Angular 6 app

Discover how to create Angular libraries both manually and with the assistance of Angular CLI 6.

Angular 6 Development: Reactive Programming

Angular 6 Development: Reactive Programming

• use the rxjs-compat library to help migrate from Angular 5 to Angular 6 with respect to RxJS
• use RxJS 6 standalone creation methods to create observables
• use pipeable operators in RxJS 6
• create and use custom operators in RxJS 6
• convert an observable to a Promise in RxJS 6
• set up a subscriber to handle any errors on an observable stream
• set up an observable stream using catch (RxJS5) or catchError (RxJS6) to be able to handle errors before subscribers receive them
• use the pipeable operator retry to resubscribe to an observable that experienced an error
• use the pipeable operator retryWhen to resubscribe to an observable that experienced an error based on business logic
• combine multiple observables into one
• transform an observable stream into another observable stream that bundles items emitted by the source observable before emitting
• use the FlatMap operator to work with a source observable that itself emits observables
• use the scan function to generate an aggregate value based on current and previously emitted items

Reactive programming can provide a powerful framework for creating web apps, although it does require thinking differently sometimes. Explore RxJS and how to create Reactive apps with Angular 6.

Angular 6 Development: Reactive Programming

Angular 6 Development: Reactive Programming

• use the rxjs-compat library to help migrate from Angular 5 to Angular 6 with respect to RxJS
• use RxJS 6 standalone creation methods to create observables
• use pipeable operators in RxJS 6
• create and use custom operators in RxJS 6
• convert an observable to a Promise in RxJS 6
• set up a subscriber to handle any errors on an observable stream
• set up an observable stream using catch (RxJS5) or catchError (RxJS6) to be able to handle errors before subscribers receive them
• use the pipeable operator retry to resubscribe to an observable that experienced an error
• use the pipeable operator retryWhen to resubscribe to an observable that experienced an error based on business logic
• combine multiple observables into one
• transform an observable stream into another observable stream that bundles items emitted by the source observable before emitting
• use the FlatMap operator to work with a source observable that itself emits observables
• use the scan function to generate an aggregate value based on current and previously emitted items

Reactive programming can provide a powerful framework for creating web apps, although it does require thinking differently sometimes. Explore RxJS and how to create Reactive apps with Angular 6.

Angular 6 Development: Testing & TDD

Angular 6 Development: Testing & TDD

• create a unit or functional Angular unit test
• create testing modules using the Angular TestBed
• test an Angular 6 service class
• test a component using a unit test
• test a directive using wrapper components in a unit test
• use a unit test to test a pipe input and output
• create unit tests for classes that have dependencies using Mocks
• create unit tests for classes that have dependencies using Spies
• test components that receive inputs from host components
• test components that are able to emit output events to host components
• test services that employ Angular's HttpClient
• configure tests to run change detection automatically

Testing in software development is crucial for success and Angular 6 provides a testing environment that makes testing easy. Discover how to use the testing environment to unit or function test your Angular 6 apps.

Angular 6 Development: Testing & TDD

Angular 6 Development: Testing & TDD

• create a unit or functional Angular unit test
• create testing modules using the Angular TestBed
• test an Angular 6 service class
• test a component using a unit test
• test a directive using wrapper components in a unit test
• use a unit test to test a pipe input and output
• create unit tests for classes that have dependencies using Mocks
• create unit tests for classes that have dependencies using Spies
• test components that receive inputs from host components
• test components that are able to emit output events to host components
• test services that employ Angular's HttpClient
• configure tests to run change detection automatically

Testing in software development is crucial for success and Angular 6 provides a testing environment that makes testing easy. Discover how to use the testing environment to unit or function test your Angular 6 apps.